<template>
  <div class="order">
    <div class="title">
      <van-icon name="checked" class="wechaticon" /> 订单提交成功
    </div>
    <div class="paymark">
      <span class="des"
        >请您在提交订单<em class="orange time">4小时</em
        >之内完成支付，超时订单会自动取消。订单号：<em>{{ orderId }}</em></span
      >
      <span class="paymoney"
        ><em class="lead">应付金额：</em
        ><em class="orange money">￥{{ totalFee }}</em></span
      >
    </div>
    <div class="checkout-info">
      <h4 class="importnote">重要说明：</h4>
      <ol>
        <li>
          尚品汇商城支付平台目前支持<span class="zfb">支付宝</span>支付方式。
        </li>
        <li>其它支付渠道正在调试中，敬请期待。</li>
        <li>为了保证您的购物支付流程顺利完成，请保存以下支付宝信息。</li>
      </ol>
      <h4 class="importnote">
        支付宝账户信息：（很重要，<span class="save">请保存！！！</span>）
      </h4>
      <ul>
        <li>支付帐号：11111111</li>
        <li>密码：111111</li>
        <li>支付密码：111111</li>
      </ul>
    </div>
    <!-- <van-cell is-link title="请选择支付方式" @click="show = true" />
      <van-action-sheet
      :title="'选择支付方式'"
      v-model:show="show"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @cancel="onCancel"
      ></van-action-sheet>  -->
    <van-cell title="立即分享给好友" @click="showShare = true" />
    <van-share-sheet
      v-model:show="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
    <div class="btnbox">
      <van-button type="danger" class="btn" @click="payment"
        >立即支付</van-button
      >
    </div>
    <van-dialog
      v-model:show="show"
      title="微信扫码支付"
      show-cancel-button
      confirmButtonText="已完成支付"
      confirmButtonColor="green"
      cancelButtonText="支付遇到问题"
      @cancel="payerror"
      @confirm="confirm"
      cancelButtonColor="red"
    >
      <div class="imgbox">
        <img :src="codeImg" alt="" class="qrcodeimg" />
      </div>
    </van-dialog>
  </div>
</template>

<script setup lang="ts">
import {reqGetPayInfo, reqGetPayStatus} from "../../api/shopcart";
import {ref, onMounted} from "vue";
import {useRoute} from "vue-router";
import {ToastOptions, showFailToast, showToast} from "vant";
import QRCode from "qrcode";
import router from "../../router";
// console.log(QRCode);

const show = ref(false);
const route = useRoute();
const orderId = ref("");
const totalFee = ref(0);
const codeUrl = ref("");
const codeImg = ref("");
const timer = ref();
const showShare = ref(false);
const options = [
  {name: "微信", icon: "wechat"},
  {name: "微博", icon: "weibo"},
  {name: "复制链接", icon: "link"},
  {name: "分享海报", icon: "poster"},
  {name: "二维码", icon: "qrcode"},
];

const onSelect = (option: any) => {
  showToast(option.name);
  showShare.value = false;
};

// 获取支付信息
const getInfo = async () => {
  const result = await reqGetPayInfo(orderId.value);
  // console.log(result);
  totalFee.value = result.data.totalFee;
  codeUrl.value = result.data.codeUrl;
};
// 获取支付的状态
const getPayStatus = async () => {
  try {
    await reqGetPayStatus(orderId.value);
    // payerror()
    // console.log(result);
    // router.push('/order_success')
  } catch (err) {
    console.log("支付中");
  }
};
// 点击支付
const payment = () => {
  QRCode.toDataURL(codeUrl.value)
    .then((url: string) => {
      codeImg.value = url;
      show.value = true;
      // 心跳请求
      timer.value = setInterval(() => {
        getPayStatus();
      }, 1000);
    })
    .catch((err: any) => {
      console.log(err);
    });
};
// 点击支付中遇到的问题
const payerror = () => {
  show.value = false;
  clearInterval(timer.value);
};
// 点击支付完成
const confirm = async () => {
  try {
    await reqGetPayStatus(orderId.value);
    payerror();
    router.push("/order_success");
  } catch (error) {
    showFailToast("订单还未支付,如果遇到问题,请联系客服");
    payerror();
  }
};
// 挂载
onMounted(() => {
  orderId.value = route.query.orderId as string;
  getInfo();
});
</script>
<script lang="ts">
export default {
  name: "paySuccess",
};
</script>

<style scoped lang="scss">
.order {
  display: flex;
  flex-direction: column;
  padding: 30px;
  background-color: #fff;
  .title {
    text-align: center;
    // margin: 20px auto;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 30px;
    .wechaticon {
      color: #20d123;
      vertical-align: center;
      font-size: 24px;
    }
  }
  .paymark {
    .des {
      font-size: 14px;
      color: #403e3e;
      .orange {
        color: rgb(212, 43, 43);
        font-size: 16px;
      }
    }
    .paymoney {
      display: block;
      margin-top: 20px;
      text-align: right;
      font-size: 18px;
      font-weight: bold;
      .orange {
        color: rgb(212, 43, 43);
      }
    }
  }
  .checkout-info {
    border: 2px solid rgb(212, 43, 43);
    box-sizing: border-box;
    margin-top: 30px;
    padding: 10px;
    .importnote {
      font-size: 14px;
      font-weight: 700;
      margin: 10px 0;
      color: rgb(212, 43, 43);
    }
    ol {
      font-size: 14px;
      list-style: decimal;
    }
    li {
      font-size: 14px;
      margin-left: 30px;
    }
  }
  .btnbox {
    margin-top: 30px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    .btn {
      padding: 5px;
    }
  }
  .imgbox {
    text-align: center;
    margin-top: 10px;
    .qrcodeimg {
      width: 200px;
      height: 200px;
    }
  }
}
// .pay_wrap {
// 		justify-content: space-around;
// 		align-items: center;
// 		height: 600px;
//     display: flex;
//     flex-direction: column;
// }
// 		.wxpay {
// 			font-size: 20px;

// 		}

// 		.paybtn {
// 			display: block;
// 			width: 120px;
// 			background-color: red;
// 			height: 50px;
// 			color: #fff;
// 			border: 1px solid #fff;
// 		}
</style>
